<template>
	<view class="page-container">
		<view class="instruction-card">
			<text class="instruction-text">
				点击开始测试，将手机放置在离人脸约1.4米处，露出完整手掌，做出向上手势即可自动开始测试。
				请在听到叮的一声后在5秒内做出相应手势。
				一次测试只能测试单眼，请自行遮住另一只眼睛。
				初始从0.1视标开始测试，视标方向随机生成，答对两次换下一个视标，答错两次则检测结束。
			</text>
			<view class="warning-box">
				<text class="warning-title">注意事项：</text>
				<text class="warning-item">1.测试左眼请用右手遮住右眼，测试右眼请用左手遮住左眼。</text>
				<text class="warning-item">2.最佳测试距离为1.4m。</text>
				<text class="warning-item">3.一定要在5秒内做出手势，超时则判错。</text>
				<text class="warning-item">4.测试过程中画面中最多只能出现两只手。</text>
			</view>
		</view>
		
		<view class="button-group">
			<button class="primary-btn" @click="openPopup()">测视力</button>
			<button class="secondary-btn" @click="gotoHistory()">历史记录</button>
			<button class="secondary-btn" @click="gotoSightSave()">近视防控</button>
			<button class="secondary-btn" @click="gotoSetting()">设置</button>
		</view>

		<uni-popup ref="popup" type="center" class="custom-popup">
			<view class="popup-content">
				<button class="eye-test-btn left-eye" @click="gotoVisionTest(1)">测左眼视力</button>
				<button class="eye-test-btn right-eye" @click="gotoVisionTest(0)">测右眼视力</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
export default {
  data() {
    return {
		
    };
  },
  methods: {
    gotoVisionTest(eye){
		uni.navigateTo({
			url:'/pages/test/test?eye='+eye,
		})
		this.closePopup();
	},
	
	gotoSetting(){
		uni.navigateTo({
			url:'/pages/setting/setting'
		})
	},
	
	gotoHistory(){
		uni.navigateTo({
			url:'/pages/history/history'
		})
	},
	
	gotoSightSave(){
		uni.navigateTo({
			url:'/pages/sightSave/sightSave'
		})
	},
	
	openPopup(){
		this.$refs.popup.open();
	},
	
	closePopup(){
		this.$refs.popup.close();
	}
  },
	
  mounted() {
    
  },
};
</script>

<style lang="scss">
/* 颜色变量定义 */
:root {
	--primary-color: #5095fa;    // 主色调
	--secondary-color: #6c757d;  // 次要色调
	--warning-bg: #fff3cd;       // 警告背景
	--text-primary: #2c3e50;    // 主要文字
	--text-secondary: #6c757d;  // 次要文字
}

.page-container {
	padding: 30rpx;
	background: #f8f9fa;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.instruction-card {
	background: white;
	border-radius: 16rpx;
	padding: 32rpx;
	box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.08);
	margin-bottom: 40rpx;
}

.instruction-text {
	color: var(--text-primary);
	font-size: 32rpx;
	line-height: 1.8;
	margin-bottom: 24rpx;
}

.warning-box {
	background: var(--warning-bg);
	border-left: 8rpx solid #ffc107;
	border-radius: 8rpx;
	padding: 24rpx;
	margin-top: 32rpx;
}

.warning-title {
	display: block;
	font-weight: bold;
	color: #856404;
	font-size: 30rpx;
	margin-bottom: 16rpx;
}

.warning-item {
	display: block;
	color: #856404;
	font-size: 26rpx;
	line-height: 1.6;
	margin-bottom: 12rpx;
}

.button-group {
	display: flex;
	flex-direction: column;
	gap: 14rpx;
}

.primary-btn {
	background: var(--primary-color);
	color: white !important;
	border-radius: 50rpx !important;
	font-size: 40rpx;
	height: 99rpx;
	width: 500rpx;
	box-shadow: 0 4rpx 16rpx rgba(80,149,250,0.3);
	transition: all 0.3s ease;
	
	&:active {
		transform: scale(0.98);
		opacity: 0.9;
	}
}

.secondary-btn {
	background: white;
	color: var(--text-primary) !important;
	border: 2rpx solid #dee2e6 !important;
	border-radius: 50rpx !important;
	font-size: 35rpx;
	width: 500rpx;
	height: 88rpx;
	
	&:active {
		background: #f8f9fa;
	}
}

.custom-popup {
	.uni-popup__wrapper {
		border-radius: 24rpx !important;
		background: rgba(255,255,255,0.95) !important;
		backdrop-filter: blur(10px);
	}
}

.popup-content {
	padding: 40rpx;
	min-width: 500rpx;
}

.eye-test-btn {
	height: 100rpx;
	border-radius: 16rpx !important;
	margin-bottom: 24rpx;
	font-size: 32rpx;
	font-weight: bold;
	
	&.left-eye {
		background: var(--primary-color);
		color: white !important;
	}
	
	&.right-eye {
		background: #17a2b8;
		color: white !important;
	}
}
</style>